<template>
  <div class="sidebar">
    <div v-for="(item, index) in sidebarList" :key="index" @click="sidebarClick(item)" :style="{ width: sidebarIndex == item.path ? (233 / 96) + 'rem' : (226 / 96) + 'rem', height: (80 / 96) + 'rem', background: '#080911', borderTopRightRadius: (40 / 96) + 'rem', borderBottomRightRadius: (40 / 96) + 'rem', display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center', marginBottom: (28 / 96) + 'rem', boxShadow: sidebarIndex == item.path ? '0rem ' + (13 / 96) + 'rem ' + (13 / 96) + 'rem 0rem rgba(0, 0, 0, 0.2)' : '', opacity: sidebarIndex == item.path ? 0.9 : 1, cursor: 'pointer' }">
      <span :style="{ fontSize: sidebarIndex == item.path ? (38 /96) + 'rem' : (34 /96) + 'rem', fontFamily: 'FZKai-Z03S, KaiTi', fontWeight: '400', color: sidebarIndex == item.path ? '#FFFFFF' : '#CCCCCC', lineHeight: (30 /96) + 'rem', opacity: sidebarIndex == item.path ? 1 : 0.8 }">{{ item.title }}</span>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Sidebar',
    props: {
      sidebarIndex: {
        type: String,
        default() {
          return "";
        }
      },
      sidebarList: {
        type: Array,
        default() {
          return [];
        }
      }
    },
    data() {
      return {

      }
    },
    methods: {
      sidebarClick(item) {
        this.$emit("sidebarClick", item);
      }
    }
  }
</script>

<style>
  .sidebar {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }
</style>
